<template>
    <!-- 当数据为空需要占位时，会显示 cellEmptyContent 
      : data 表格数据 
      ：columns 表格列【即表头】
      ：stripe 表格斑马纹
      ：bordered 表格边框
      ：hover 表格hover效果
      ：table-layout 表格布局
      ：size 表格尺寸
      ：pagination 分页
      ：show-header 表格是否显示表头
      ：onRowClick 行点击事件
    -->
    <t-table
      row-key="index"
      :data="data" 
      :columns="columns"
      :stripe="stripe"
      :bordered="bordered"
      :hover="hover"
      :table-layout="tableLayout ? 'auto' : 'fixed'"
      :size="size"
      :pagination="pagination"
      :show-header="showHeader"
      cell-empty-content="-"
      resizable
      lazy-load
      @row-click="handleRowClick"
    >
        <!-- <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template> -->

        <!-- 图片展示的template #后面的名称需要数据展示表格的表头的列名一致 -->
        <template #image="{ row }">
            <div>
                <div class="tdesign-demo-image-viewer__base">
                    <t-image-viewer :images="[row.image]">
                        <template #trigger="{ open }">
                            <div class="tdesign-demo-image-viewer__ui-image">
                                <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                                    <span>
                                        <BrowseIcon size="1.4em" /> 预览
                                    </span>
                                </div>
                            </div>
                        </template>
                    </t-image-viewer>
                </div>
            </div>
        </template>

        <template #gender="{ row }">{{ row.gender == 1 ? '男' : '女' }}</template>
    </t-table>
</template>

<script lang="tsx" setup>
    import { ref } from 'vue';
    import { TableProps } from 'tdesign-vue-next';

    /* 表格数据 */
    const data: TableProps['data'] = 
    [
        {
        "id": 1398585768786,
        "name": "谢逊",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
        "gender": 1,
        "job": "班主任",
        "entrydate": "2023-06-09",
        "updatetime": "2023-07-01 00:00:00"
        },
        {
        "id": 1398585768767,
        "name": "韦一笑",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg",
        "gender": 1,
        "job": "班主任",
        "entrydate": "2023-06-09",
        "updatetime": "2023-07-01 00:00:00"
        },
        {
        "id": 1398585768733,
        "name": "黛绮丝",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg",
        "gender": 2,
        "job": "班主任",
        "entrydate": "2023-06-09",
        "updatetime": "2023-07-01 00:00:00"
        },
        {
        "id": 1398585768334,
        "name": "殷天正",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg",
        "gender": 1,
        "job": "班主任",
        "entrydate": "2023-06-09",
        "updatetime": "2023-07-01 00:00:00"
        },
        {
        "id": 1398533768786,
        "name": "谢逊",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
        "gender": 1,
        "job": "班主任",
        "entrydate": "2023-06-09",
        "updatetime": "2023-07-01 00:00:00"
        },
        {
        "id": 1398583368767,
        "name": "韦一笑",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg",
        "gender": 1,
        "job": "班主任",
        "entrydate": "2023-06-09",
        "updatetime": "2023-07-01 00:00:00"
        },
        {
        "id": 1398555768733,
        "name": "黛绮丝",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg",
        "gender": 2,
        "job": "班主任",
        "entrydate": "2023-06-09",
        "updatetime": "2023-07-01 00:00:00"
        },
        {
        "id": 1397785768334,
        "name": "殷天正",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg",
        "gender": 1,
        "job": "班主任",
        "entrydate": "2023-06-09",
        "updatetime": "2023-07-01 00:00:00"
        }
    ];

    const total = 28;
    
    const stripe = ref(false);
    const bordered = ref(true);
    const hover = ref(true);
    const tableLayout = ref(true);
    const size = ref<TableProps['size']>('medium');
    const showHeader = ref(true);

    /* 
    表格列（表头）
    序号的处理：
        方式一：
            第一步：在t-table表格标签中声明一个template，如下
                <t-table>
                    <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
                </t-table>
            第二步：在序号列中，使用rowIndex属性：colKey: 'rowIndex'
        
        方式二：直接在序号列中，使用rowIndex属性：colKey: 'serial-number'

    图片处理：
    方式一：
       cell: (h, { row }) => {
            return (
                <t-image
                    src={row.image}
                    style="{ width: '160px', height: '160px' }"
                    shape="circle"
                    fit="cover"
                />
            );
        }
    方式二：在t-table表格标签中声明一个template，如下：
    <template #image="{ row }">
        <div>
            <div class="tdesign-demo-image-viewer__base">
                <t-image-viewer :images="[row.image]">
                    <template #trigger="{ open }">
                        <div class="tdesign-demo-image-viewer__ui-image">
                            <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                                <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                                <span>
                                    <BrowseIcon size="1.4em" /> 预览
                                </span>
                            </div>
                        </div>
                    </template>
                </t-image-viewer>
            </div>
        </div>
    </template>

    性别的处理：
        方式一：
        cell: (h, { row }) => {
            return row.gender === 1 ? '男' : '女';
        }
        方式二：在t-table表格标签中声明一个template，如下：
        <template #gender="{ row }">{{ row.gender == 1 ? '男' : '女' }}</template>
        


    */
    const columns = ref<TableProps['columns']>([
    {
        colKey: 'serial-number',
        title: '序号',
        width: '100',
    },
    {
        colKey: 'name',
        title: '姓名'
    },
    {
        colKey: 'image',
        title: '头像'
    },
    {
        colKey: 'gender',
        title: '性别'
    },
    {
        colKey: 'job',
        title: '职位',
    },
    {
        colKey: 'entrydate',
        title: '入职时间',
    },
    {
        colKey: 'updatetime',
        title: '更新时间',
    }
    ]);
    /* 行点击事件 */
    const handleRowClick: TableProps['onRowClick'] = (e) => {
        console.log(e);
    };

    /* 分页 */
    const pagination: TableProps['pagination'] = {
        defaultCurrent: 1,
        defaultPageSize: 5,
        total,
        pageSizeOptions:[10,20,30,50,100]
    };
</script>

<style lang="less" scoped >

</style>